<template>
	<view class="uni_box home">
		<!-- <navbar title='纠错' :yin="true">
		</navbar> -->
		<view class="wenhead">
			<image class="pbg" src="@/pages_subject/static/img/wenbg.png" mode="" />
			<view class="wenitem">
				<!-- <u-icon name="arrow-left" color="#fff" size="40" class="fan" @click="getfan"></u-icon> -->
				<image class="cai" src="@/pages_subject/static/img/cai.png" mode="" @click="getmine" />
				<text class="biaoti">学习计划</text>
				<image class="tzhi" src="@/pages_subject/static/img/tzhi.png" mode="" />
			</view>
		</view>
		<view class="content">
			<view class="wentwo">
				<view class="jindu">
					<u-circle-progress active-color="#FD864F" width="230" inactive-color="#FFE4D8" :percent="getnum(kaoinfo.test_bfb)">
						<view class="u-progress-content">
							<text class='u-progress-info'>正确率：{{kaoinfo.test_bfb}}%</text>
						</view>
					</u-circle-progress>
				</view>
				<view class="daka">
					<text class="daname">考试时间：<text class="damiao">{{kaoinfo.ks_time}}</text></text>
					<text class="daname">距考试时间：<text class="damiao">{{kaoinfo.ks_days}}</text></text>
					<text class="daname">您已连续打卡<text class="damiao">{{ kaoinfo.check_days }}</text>天</text>
					<view class="daview">
						<view class="daitem" @click="getdaka">
							<image class="daicon" src="@/pages_subject/static/img/daka.png" mode="" />
							<text>打卡</text>
						</view>
					</view>
				</view>
				
			</view>
			<view class="xuetwo">
				<view class="xueheaad">
					<text class="xuezhi">学习指标</text>
					<view class="tiao" @click="gettiao">调整学习计划</view>
				</view>
				<view class="xiejin">
					<view class="jinitem">
						<text class="jione">视频进度：{{zhiinfo.course_do}}/{{ zhiinfo.course_count }}</text>
						<text class="jione">学习完成 ：{{ zhiinfo.course_yes }}</text>
						<text class="jione">剩余学习：{{ zhiinfo.course_no }}</text>
						<image class="jinimg" src="@/pages_subject/static/img/jinone.png" mode="" />
					</view>
					<view class="jinitem">
						<text class="jione">做题进度：{{ zhiinfo.test_do }}/{{ zhiinfo.test_count }}</text>
						<text class="jione">做对的题 ：{{ zhiinfo.test_yes }}</text>
						<text class="jione">做错的题：{{ zhiinfo.test_no }}</text>
						<image class="jinimg" src="@/pages_subject/static/img/jintwo.png" mode="" />
					</view>
				</view>
			</view>

			<view class="timexuan">
				<!-- <text class="xuantit">请选择日期</text>
				<view class="timeright">
					<text class="riname">2020年11月</text>
					<u-icon name="arrow-right" color="#999" size="28" class="ricon"></u-icon>
				</view> -->
				<view class="xueitem">
					<view class="rihead" @click="newtimeshow=true">
						<!-- <u-icon name="arrow-left" color="rgba(253, 137, 79, 1)" size="40" class="fan"></u-icon> -->
						<text class="nian">{{weekinfo.month}}</text>
						<image class="xiaicon" src="@/pages_subject/static/img/xia.png" mode="" />
					</view>
					
					<view class="xuelist">
						<view class="xues xueone" v-for="(item, index) in rihead" :key="index">
							<text class="shi">{{ item.name }}</text>
						</view>
					</view>
					<swiper class="xuelist" style="height: 100rpx;" :circular="false" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
					:duration="duration" :current="Number(weekinfo.week_nums)" indicator-active-color="rgba(253, 137, 79, 1)" indicator-color="rgba(226, 226, 226, 1)" @change="swchange">
					<swiper-item class="oneitem" v-for="(item, index) in weekinfo.week_count">
						<view class="xuestwo" v-for="(item, index) in weeklist" :key="index">
							<!-- shiactive -->
							<text class="shi " :class="dayinfo==item.day ? 'shiactive' :item.status==1 ?'shixuan':''"  @click="getshichang(item)">{{item.day}}</text>
						</view>
					</swiper-item>
					</swiper>
					<!-- <view class="xuelist">
						<view class="xues" v-for="(item, index) in weeklist" :key="index" @click="getshichang(index)">
							<text class="shi " :class="item.status==1 ? 'shixuan' :''">{{item.day}}</text>
						</view>
					</view> -->
				</view>
			</view>
			<view class="xuetwo">
				<view class="xueheaad">
					<text class="xuezhi">今日任务</text>
					<text class="renname">计划执行第<text class="rennum">{{ days }}</text>天 ，今天共有<text class="rennum">{{ total }}</text>个任务</text>
				</view>
				<view class="gulist">
					<view class="nodata" v-if="list==''">
						<image class="img_nonews" src="@/pages_subject/static/img/img_nonews.png" mode="" />
						<text>今日无安排，休息大脑多运动，劳逸结合精神好!</text>
					</view>
					<view class="guitem" v-for="(item,index) in list" :key="index" @click="xueClick(item)">
						<view class="guleft">
							<text class="gname">{{ index+1 }}.{{item.title}}</text>
							<view class="xueshi">
								<text class="xshi">学时</text>
								<view class="jinview">
									<u-line-progress active-color="#FD864F" height="15" :striped="true" :striped-active="true"
							inactive-color="#EEEEEE" :percent="item.user_nums"></u-line-progress>
								</view>
								<!-- <text class="xshi">{{item.yes}}h/{{item.bfb}}h</text> -->
								<text class="xshi yixue">{{item.count}}人已学</text>
							</view>
						</view>
						<view class="guright gactive" @click="goVideoPage(item)">{{item.button_text}}</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="time">
			<u-calendar v-model="rishow" :mode="mode" active-bg-color="#FD874F" range-color="#FD874F" range-bg-color="rgba(253, 135, 79, 0.13)"></u-calendar>
		</view>

		<u-select v-model="newtimeshow" mode="single-column" :list="yuelist" @confirm="timeconfirm"></u-select>

		<!-- 左侧弹窗 -->
		<Mine :mshow="mshow" :userinfo="userinfo" :mtwolist="mtwolist"  @close="mineclose"></Mine>
	</view>
</template>

<script>
 import Mine from "@/components/Mine/Mine";
	export default {
		components:{
			Mine
		},
		data() {
			return {
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				rishow:false,
				mode:'date',
				current:0,

				num:28,
				value:'',
				rishow:false,
				mode:'range',
				mshow:false,
				mtwolist:[],
				userinfo:{
					kefu_mobile:'',
					avatar:''
				},
				combo_id:'1',//课程id
				kaoinfo:{
					test_bfb:'0'
				},
				zhiinfo:{},
				timeinfo:{},
				planinfo:{},
				day:'',
				list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
				total:0,
				days:1,
				rihead:[
					// {name:'日'},
					{name:'一'},
					{name:'二'},
					{name:'三'},
					{name:'四'},
					{name:'五'},
					{name:'六'},
					{name:'日'},
				],
				combo_id:'',
				yuelist:[],
				yueinfo:{
					month:'',
					week_nums:''
				},
				newtimeshow:false,
				weeklist:[],
				weekinfo:{},
				dayinfo:''
			}
		},
		onLoad(option) {
			if(option.combo_id){
				this.combo_id = option.combo_id
			}
			this.getmenu()
			this.getuserinfo();//个人信息
			this.getkaoshi();//考试相关
			this.getzhibiao();//学习指标
			// this.fgetPlanDays();//日期
			this.fgetPlanList();//今日任务
			this.fzhigetMonth();//获取月份
		},
		onShow() {
		},
		// onReachBottom: function () {
		// 	this.loadmore();
		// },
		methods: {
			goVideoPage(e){
				if(e.button_type===1){
					// 跳转视频学习页面
					// #ifdef H5
					this.navrouter(
						`/pages_subject/twoPage/ZhikePage/MissionVideo?day=${this.day}`
					);
					// #endif
				}
			},
			getshichang(item){
				this.dayinfo = item.day
				this.day = this.weekinfo.month+'-'+item.day
				// console.log(this.day)
				this.fgetPlanList()
			},
			async getkaoshi(){
				let res = await this.$u.api.getPlanData({
					combo_id:this.combo_id
				});
				this.kaoinfo = res
			},
			async getzhibiao(){
				let res = await this.$u.api.getPlanTarget({
					combo_id:this.combo_id
				});
				this.zhiinfo = res
			},
			async fgetPlanDays(){
				let res = await this.$u.api.getPlanDays({
					combo_id:this.combo_id
				});
				this.timeinfo = res
			},
			async fgetPlanList(){
				let res = await this.$u.api.getPlanList({
					combo_id:this.combo_id,
					day:this.day,
					page:this.page
				});
				this.list = res.list;
				// this.last_page = res.lastpage;
				// this.total = res.total
				// this.days = res.days
				// let list = res.list;
				// this.list = this.page == 1 ? list : [...this.list, ...list];	
				// if(this.page >= this.last_page){
				// 	this.status = 'nomore';
				// }
			},
			loadmore() {
				let page = this.page;
				// let last_page = this.last_page;
				if (this.status == 'loadmore') {
					this.page++;
					this.fgetPlanList();
				}
			},
			async getuserinfo(){
				let res = await this.$u.api.minegetData({
				});
				this.userinfo = res
			},
			async getmenu(){
				let res = await this.$u.api.zhikeMenu({
					combo_id:this.combo_id
				});
				this.mtwolist = res
			},
			async fzhigetMonth(){
				let res = await this.$u.api.zhigetMonth({
					combo_id:this.combo_id
				});
				
				let data = res
				for(let i in data){
					data[i].label = data[i].title
					data[i].value = data[i].week_nums
				}
				this.yuelist = data
				// this.yueinfo = res[0]
				this.getmonthinfo();
			},
			async getmonthinfo(){
				let res = await this.$u.api.zhigetWeekDays({
					month:this.yueinfo.month,
					week_nums:this.yueinfo.week_nums
				});
				this.weekinfo = res
				this.weeklist = res.list
			},
			timeconfirm(e){
				console.log(e)
				let yuelist = this.yuelist
				console.log(yuelist)
				for(let i in yuelist){
					if(yuelist[i].label == e[0].label){
						this.yueinfo = yuelist[i]
					}
				}
				console.log(this.yueinfo)
				this.getmonthinfo();
			},
			jiaobtn(){
				this.navrouter("/pages_subject/twoPage/TiPage/TiBaogao");
			},
			gettiao(){
				this.navrouter("/pages_subject/twoPage/ZhikePage/Jihua");
			},
			getdaka(){
				this.navrouter("/pages_subject/twoPage/ZhikePage/Daka");
			},
			getfan(){
				uni.navigateBack()
			},
			riClick(){
				this.rishow = true
			},
			getmine(){
				this.mshow = true
				// uni.hideTabBar();
			},
			mineclose(){
				this.mshow = false
				// uni.showTabBar();
			},
			getnum(e){
				return e.toString()
			},
			swchange(e){
				// console.log(e)
				// console.log(this.weekinfo)
				this.yueinfo.month = this.weekinfo.month
				this.yueinfo.week_nums = e.detail.current
				this.getmonthinfo();
			},
			xueClick(item){
				this.toPage(item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.wenhead{
		position: relative;
		height: 354rpx;
		.pbg{
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.wenitem{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx;
			.fan{
				position: absolute;
				left: 30rpx;
			}
			.cai{
				position: absolute;
				left: 30rpx;
				width: 36rpx;
				height: 27rpx;
			}
			.tzhi{
				position: absolute;
				right: 30rpx;
				width: 25rpx;
				height: 28rpx;
				margin-top: -2rpx;
			}
			.biaoti{
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
			}

		}
	}
	/deep/.time .u-btn--primary {
		color: #ffffff;
		border-color: #FD874F;
		background-color: #FD874F;
	}
	.content{
		background-color: #fff;
		padding: 40rpx 0rpx;
		.jiuone{
			padding: 0 30rpx;
			.jiutit{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #010101;
				display: block;
				margin-bottom: 40rpx;
			}
			.jiunav{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.jiuitem{
					padding: 18rpx 40rpx;
					background: #EEEEEE;
					border-radius: 50rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #333333;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
				}
				.jactive{
					background: linear-gradient(-90deg, #FA4E4E, #FD894F);
					color: #fff;
				}
			}
		}
		.wentwo{
			margin: -30% 30rpx 30rpx;
			position: relative;
			background: #FFFFFF;
			padding: 30rpx 25rpx;
			box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0,0,0,0.06);
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.jindu{
				margin-top: 44rpx;
				width: 40%;
				.u-progress-content {
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
				.u-progress-dot {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background-color: #fb9126;
				}
				
				.u-progress-info {
					padding-left: 16rpx;
					font-family: PingFang SC;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 25rpx;
					color: #333333;
				}
			}
			.daka{
				display: flex;
				flex-direction: column;
				flex: 1;
				padding-top: 40rpx;
				.daname{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #272C31;
					display: block;
					margin-bottom: 15rpx;
				}
				.damiao{
					color: rgba(253, 135, 79, 1);
				}
				.daname:last-child{
					margin-bottom: 0;
				}
			}
			.daview{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.daitem{
					padding: 12rpx 30rpx;
					background: linear-gradient(-90deg, #FA4E4E, #FD894F);
					border-radius: 5rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					text{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
					}
					.daicon{
						margin-right: 10rpx;
						width: 24rpx;
						height: 22rpx;
					}
				}
			}
		}
		.xuetwo{
			margin: 50rpx 30rpx;
			.xueheaad{
				margin-bottom: 40rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				.xuezhi{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}
				.tiao{
					padding: 4rpx 11rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FD874F;
					border-radius: 24rpx;
					border: 1rpx solid #F06103;
					margin-left: auto;
				}
			}
			.xiejin{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				.jinitem{
					width: 48%;
					padding: 40rpx 20rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0,0,0,0.06);
					border-radius: 10rpx;
					position: relative;
					.jione{
						display: block;
						margin-bottom: 14rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #595959;
					}
					.jinimg{
						position: absolute;
						width: 154rpx;
						height: 171rpx;
						right: -18rpx;
						bottom: -18rpx;
					}
					.jione:last-child{
						margin-bottom: 0;
					}
				}
			}

			.renname{
				display: inline-block;
				margin-left: 40rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #333333;
				display: block;
				
			}
			.rennum{
				color: rgba(253, 135, 79, 1);
			}
			.gulist{
				margin-top: 40rpx;
				.nodata{
					height: 548rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 3rpx 35rpx 0rpx rgba(128,128,128,0.13);
					border-radius: 10rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-bottom: 30rpx;
					.img_nonews{
						width: 261rpx;
						height: 206rpx;

					}
					text{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
						display: block;
						margin-top: 100rpx;
					}
				}
				.guitem{
					margin-bottom: 30rpx;
					padding: 30rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 3rpx 35rpx 0rpx rgba(128,128,128,0.13);
					border-radius: 10rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.guleft{
						width: 70%;
						display: flex;
						flex-direction: column;
						.gname{
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							display: block;
							margin-bottom: 15rpx;
						}
						.jinview{
							position: relative;
							width: 180rpx;
							margin: 0 10rpx;
						}
						.yixue{
							display: inline-block;
							margin-left: 10rpx;
						}
						.xueshi{
							display: flex;
							flex-direction: row;
							align-items: center;
							.xshi{
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #999999;
							}
						}
					}
					.guright{
						margin-left: auto;
						padding: 10rpx 20rpx;
						border: 1px solid #F06103;
						border-radius: 50rpx;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FD864F;
					}
					.gactive{
						color: #FFFFFF;
						border: none;
						background: linear-gradient(-90deg, #FA4E4E, #FD894F);

					}
				}
			}
		}

		.timexuan{
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0,0,0,0.06);
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 30rpx 30rpx 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			.xueitem {
			position: relative;
			width: 100%;
			height: 100%;
			// padding:45px 30rpx 30rpx;
			// background: #FBECE8;
			// border-radius: 20rpx;
			.rihead{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.nian{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
				.xiaicon{
					width: 17rpx;
					height: 11rpx;
					margin-left: 6rpx;
				}
			}
			.xuelist {
				// height: 200px;
				width: 100%;
				// margin-top: 10%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.xues {
					width: 14%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 20rpx;

					.shi {
						min-width: 50rpx;
						height: 50rpx;

						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #333333;

					}

					.shiactive {
						background: #FD874F;
						color: #FFFFFF;
					}
					.shixuan{
						border: 1rpx solid #F06103;
					}
				}
				.xuestwo {
					width: 14%;
					display: inline-block;
					align-items: center;
					justify-content: center;
					margin-bottom: 20rpx;
					text-align: center;

					.shi {
						min-width: 50rpx;
						height: 50rpx;

						border-radius: 50%;
						display: inline-block;
						align-items: center;
						justify-content: center;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #333333;
						text-align: center;
    					padding: 3px 5px;

					}

					.shiactive {
						background: #FD874F;
						color: #FFFFFF;
					}
					.shixuan{
						border: 1rpx solid #F06103;
					}
				}
				.xueone{
					margin-top: 30rpx;
					margin-bottom: 30rpx;
					.shi{
						color: #999999;
					}
				}
			}
		}
			.xuantit{
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}
			.timeright{
				margin-left: auto;
				display: flex;
				align-items: center;
				.riname{
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999;

				}
				.ricon{
					margin-left: 10rpx;
				}
			}
		}
		.tifour{
			padding: 20rpx;
			background: rgba(170, 170, 170, 0.2);
			border-radius: 10rpx;
			height: 200rpx;
			// margin: 0 30rpx;
		}
		.biaoti{
			display: block;
			margin-bottom: 20rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #111111;
		}
		.biaomiao{
			color: rgba(153, 153, 153, 1);
			font-size: 20rpx;
		}
		.ganxie{
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			display: block;
			margin: 40rpx 30rpx;
		}
		.tulist{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.tuitem{
				background: #FFFFFF;
				border-radius: 5rpx;
				// box-shadow: 20rpx 10rpx 20rpx 20rpx rgba(202,205,217,0.14);
				width: 150rpx;
				height: 90rpx;
				border: 1rpx solid #eee;
				display: flex;
				align-items: center;
				justify-content: center;
				.xiangji{
					width: 46rpx;
					height: 42rpx;
				}
			}
		}
		.kaone{
			height: 96rpx;
			background-color: #eee;
			width: 100%;
			position: relative;
			padding: 0 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.kaitem{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-right: 50rpx;
				.yuans{
					width: 28rpx;
					height: 28rpx;
					margin-right: 15rpx;
				}
				text{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
				}

			}
		}
		.katwo{
			padding: 30rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.kkatwoitem{
				width: 25%;
				margin-bottom: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.ktitem{
					width: 75rpx;
					height: 75rpx;
					background: #EEEEEE;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
				}
				
			}
			.kactive{
				.ktitem{
					background: #FD864F;
					color: #fff;
				}
				
			}
		}
		.jiaojuean{
			position: fixed;
			width: 100%;
			height: 120rpx;
			bottom: 0;
			background: #FFFFFF;
			box-shadow: 0rpx -10rpx 20rpx 0rpx rgba(202,205,217,0.14);
			// background: linear-gradient(-90deg, #FA4E4E, #FD894F);
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			padding: 0 30rpx;
			.tibtn{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 80rpx;
				background: linear-gradient(-90deg, #FA4E4E, #FD894F);
				border-radius: 40rpx;
				width: 100%;
			}
		}
		// padding-bottom: 150rpx;
	}
</style>
